<template>
	<view class="content">
		<!-- 选项卡 -->
		<view class="top-tabs-list-box">
			<u-tabs 
				name="cate_name"
				:list="typeList"
				active-color="#181818"
				height="50"
				inactive-color="#868686" 
				:is-scroll="true"
				:current="current"
				@change="onChange"
			></u-tabs>
		</view>
		<!-- 筛选框 -->
		<view class="pluge-lection-box">
			<pluge-lection
				@getSort="screenChange"
			></pluge-lection>
		</view>
		<!-- 商品列表 -->
		<goods-list :getDataList="list" @goGoodsDetails="goIntegralDetails"></goods-list>
		<!-- 空状态 -->
		<empty v-if="!list.length" top="100" bottom="100" desc="暂无商品"></empty>
	</view>
</template>

<script>
	import plugeLection from '@/components/goodsList/plugeLection.vue';
	import goodsList from '@/components/goodsList/goodsList.vue';
	import empty from '@/components/custom/emtyp.vue';
	export default {
		data() {
			return {
				cid: '', // 选中的分类ID
				typeList: [], // 分类列表
				current: 0, // 选项卡绑定index
				page: 1, // 页码
				limit: 20, // 每页条数
				sales: 0, // 销量
				price: 0, // 价格
				list: [], // 商品列表
				isMore: true, // 是否还有更多数据
			}
		},
		onLoad(option) {
			const { id } = option
			this.cid = id || ''
			this.getType()
			this.getList()
		},
		watch: {
			current: {
				handler: function(index) {
					const { typeList } = this
					this.cid = typeList[index].store_category_id
					this.getList(true)
				},
			}
		},
		methods: {
			// 获取所有分类
			getType: async function () {
				const { code, data, message } = await this.$u.api.getHallAllType()
				if (code == '1') {
					console.log('分类列表', data)
					this.typeList = data
					const { cid } = this
					cid && (this.current = data.findIndex(item => item.store_category_id == cid))
				} else {
					this.$showToast(message || '获取分类失败')
				}
			},
			// 获取分类商品列表
			getList: async function (isReset) {
				isReset && this.reset()
				uni.showLoading({ title: '加载中' })
				const { cid, price, sales, page, limit, list } = this,
					  param = { cid, price, sales, page, limit }
				console.log(param)
				const { code, data, message } = await this.$u.api.getHallType(param)
				if (code == '1') {
					console.log('商品列表', data, data.length)
					this.list = [...list, ...data]
					if (page == 1 && (data.length < limit)) {
						this.isMore = false
					} else {
						this.isMore = data.length == limit
					}
				} else {
					this.$showToast(message)
				}
			},
			// 重置条件
			reset: function () {
				this.page = 1
				this.isMore = true
				this.list = []
			},
			// 选项卡切换事件
			onChange(index) {
				this.current = index
			},
			// 分类筛选事件
			screenChange: function ({ type, sort }) {
				if (type) {
					this[type] = sort
				} else {
					
					this.price = 0
					this.sales = 0
				}
				this.getList(true)
			},
			goIntegralDetails(id){ //跳转积分详情
				this.$gourl(`../../pageCart/goodsInfo/integralDetael?id=${id}`);
			}
		},
		components:{
			plugeLection,
			goodsList,
			empty,
		},
		onReachBottom: function () {
			console.log('触底了')
			const { isMore } = this
			if (!isMore) {
				this.$showToast('暂无更多数据了')
				return
			}
			this.page ++
			this.getList()
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		font-family: Microsoft YaHei;
		padding-top: 100rpx;
		.top-tabs-list-box {
			position: fixed;top: 0;z-index: 100;
			width: 100%;
			padding: 20rpx 0;
			box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.06);
			background: #fff;
		}
		.pluge-lection-box{
			position: fixed !important;
			top: 90rpx !important;
			z-index: 99;
			background: #fff;
		}
	}
</style>
